```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tencent Cloud CodeBuddy - AI编程助手</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-text {
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 88%;
        }
        .feature-icon {
            color: #4e4376;
        }
        .scroll-fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <div class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                        <span class="highlight-text">Tencent Cloud CodeBuddy</span>
                    </div>
                    <p class="text-xl mb-8 text-gray-200">
                        基于混合大模型的AI编程助手，提升您的编码效率与质量
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://copilot.tencent.com/ide/" class="bg-white text-indigo-800 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition duration-300 text-center">
                            <i class="fas fa-rocket mr-2"></i>立即体验
                        </a>
                        <a href="#features" class="border border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-indigo-800 transition duration-300 text-center">
                            <i class="fas fa-search mr-2"></i>了解功能
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753336579645-470ecf3c-a067-43b5-86db-45f4d92d77ee.png" alt="CodeBuddy界面" class="rounded-xl shadow-2xl max-w-full h-auto border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section id="problems" class="py-16 bg-white">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">开发者常见痛点</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">CodeBuddy正是为解决这些编程过程中的困扰而生</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-clock feature-icon text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">重复性代码耗时</h3>
                    </div>
                    <p class="text-gray-600">手动编写重复性代码消耗大量时间，降低了整体开发效率，分散了开发者的注意力。</p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-bug feature-icon text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">调试复杂代码</h3>
                    </div>
                    <p class="text-gray-600">面对复杂代码逻辑时，难以快速定位问题所在，导致调试时间过长，影响项目进度。</p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-search feature-icon text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">缺乏即时支持</h3>
                    </div>
                    <p class="text-gray-600">遇到问题时需要频繁查阅文档或搜索解决方案，打断了编程思维流，影响开发体验。</p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl scroll-fade-in">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-language feature-icon text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">跨语言一致性</h3>
                    </div>
                    <p class="text-gray-600">在跨语言或跨框架开发时，难以保持代码质量和风格一致性，增加了维护成本。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">核心功能</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">CodeBuddy通过AI技术提供全方位的编程辅助</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-code feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">智能代码补全</h3>
                    <p class="text-gray-600 text-center">根据上下文生成准确的代码片段，支持20+编程语言，显著减少手动输入。</p>
                </div>

                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-stethoscope feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">代码诊断优化</h3>
                    <p class="text-gray-600 text-center">自动检测潜在错误并提出改进建议，提升代码可读性和运行性能。</p>
                </div>

                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-comments feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">技术对话支持</h3>
                    <p class="text-gray-600 text-center">通过自然语言交互解答编程问题，提供技术建议和参考文档。</p>
                </div>

                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-plug feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">多IDE兼容</h3>
                    <p class="text-gray-600 text-center">支持VS Code、JetBrains IDEs、Visual Studio等主流开发环境。</p>
                </div>

                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-brain feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">知识库集成</h3>
                    <p class="text-gray-600 text-center">结合腾讯云AI能力，提供个性化代码推荐，适应不同项目需求。</p>
                </div>

                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 scroll-fade-in">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-users feature-icon text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-center mb-4">团队协作</h3>
                    <p class="text-gray-600 text-center">企业版提供团队协作功能，统一代码风格，确保质量一致性。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">CodeBuddy适用于多种开发场景，大幅提升生产力</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="scroll-fade-in">
                    <div class="bg-indigo-100 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-bolt text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">快速原型开发</h3>
                        </div>
                        <p class="text-gray-600">初创公司开发者构建Vue.js应用时，CodeBuddy可生成组件代码、自动补全CSS样式，节省50%以上编码时间。</p>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="bg-indigo-100 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-users-cog text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">团队协作优化</h3>
                        </div>
                        <p class="text-gray-600">企业团队在跨语言项目中使用CodeBuddy统一代码风格并检测潜在Bug，确保代码质量一致性和可维护性。</p>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="bg-indigo-100 p-6 rounded-xl h-full">
                        <div class="flex items-center mb-4">
                            <div class="bg-white w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-graduation-cap text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">学习与教学</h3>
                        </div>
                        <p class="text-gray-600">编程初学者通过技术对话功能提问Python语法或算法问题，获得即时解答和示例代码，加速学习曲线。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">独特优势</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">相比同类工具，CodeBuddy具有以下特色</p>
            </div>

            <div class="grid md:grid-cols-2 gap-10 mb-12">
                <div class="scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-indigo-600 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">深度本地化</h3>
                            <p class="text-gray-600">整合腾讯云生态，基于Hunyuan和DeepSeek-R1模型优化，特别针对中文开发者需求，如支持微信小程序开发。</p>
                        </div>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-indigo-600 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-coins"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">免费模式</h3>
                            <p class="text-gray-600">提供限时免费的个人版和企业旗舰版，降低使用门槛，让更多开发者能够体验AI编程助手的价值。</p>
                        </div>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-indigo-600 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-desktop"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">多平台支持</h3>
                            <p class="text-gray-600">兼容主流IDE，适配Windows、Mac和Linux系统，覆盖广泛的开发环境和场景。</p>
                        </div>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-indigo-600 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-building"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">企业级定制</h3>
                            <p class="text-gray-600">企业专享版提供团队协作和定制化功能，满足大规模开发需求，提供更高级别的技术支持。</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md max-w-3xl mx-auto scroll-fade-in">
                <h3 class="text-xl font-semibold mb-4 text-center">局限性</h3>
                <p class="text-gray-600 text-center">目前对非主流语言的支持可能不如常见语言完善，且部分高级功能需企业版订阅才能解锁。</p>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 bg-indigo-50">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">快速上手</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">只需简单几步即可开始体验CodeBuddy的强大功能</p>
            </div>

            <div class="max-w-3xl mx-auto">
                <div class="mb-8 scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-white text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">1</div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">注册登录</h3>
                            <p class="text-gray-600">访问<a href="https://copilot.tencent.com/ide/" class="text-indigo-600 hover:underline">CodeBuddy官网</a>，使用腾讯云账号登录或注册新账号，支持微信快速绑定。</p>
                        </div>
                    </div>
                </div>

                <div class="mb-8 scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-white text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">2</div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">下载插件</h3>
                            <p class="text-gray-600">根据您的开发环境下载对应的CodeBuddy插件（支持VS Code、JetBrains IDEs、Visual Studio等）。</p>
                        </div>
                    </div>
                </div>

                <div class="mb-8 scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-white text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">3</div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">配置环境</h3>
                            <p class="text-gray-600">在IDE中启用插件，配置您的编程语言偏好和项目环境设置，完成基本个性化。</p>
                        </div>
                    </div>
                </div>

                <div class="mb-8 scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-white text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">4</div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">开始编码</h3>
                            <p class="text-gray-600">CodeBuddy会自动提供代码建议；或在对话窗口输入问题获取技术支持，享受AI辅助编程体验。</p>
                        </div>
                    </div>
                </div>

                <div class="scroll-fade-in">
                    <div class="flex items-start">
                        <div class="bg-white text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">5</div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">保持更新</h3>
                            <p class="text-gray-600">定期检查插件更新以获取最新功能，持续优化您的开发体验和效率。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data Visualization -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="text-center mb-16 scroll-fade-in">
                <h2 class="text-3xl font-bold mb-4">CodeBuddy 架构概览</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">了解CodeBuddy如何通过AI技术提升开发效率</p>
            </div>

            <div class="mermaid scroll-fade-in">
                graph TD
                    A[开发者输入] --> B(代码补全)
                    A --> C(错误检测)
                    A --> D(问题查询)
                    B --> E[生成代码建议]
                    C --> F[提供修复方案]
                    D --> G[技术文档/示例]
                    E --> H[开发者采纳]
                    F --> H
                    G --> H
                    I[腾讯云AI模型] --> B
                    I --> C
                    I --> D
                    J[知识库] --> I
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 hero-gradient">
        <div class="container mx-auto px-6 max-w-4xl text-center">
            <div class="scroll-fade-in">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">准备好提升您的编码效率了吗？</h2>
                <p class="text-xl text-gray-200 mb-8">立即体验Tencent Cloud CodeBuddy，让AI成为您的编程伙伴</p>
                <a href="https://copilot.tencent.com/ide/" class="inline-block bg-white text-indigo-800 font-semibold px-8 py-4 rounded-lg hover:bg-gray-100 transition duration-300">
                    <i class="fas fa-download mr-2"></i>免费下载体验
                </a>
            </div>
        </div>
    </section>

    <script>
        // 滚动动画
        document.addEventListener('DOMContentLoaded', function() {
            mermaid.initialize({ startOnLoad: true, theme: 'default' });
            
            const scrollElements = document.querySelectorAll('.scroll-fade-in');
            
            const elementInView = (el) => {
                const elementTop = el.getBoundingClientRect().top;
                return (
                    elementTop <= (window.innerHeight || document.documentElement.clientHeight)
                );
            };
            
            const displayScrollElement = (element) => {
                element.classList.add('is-visible');
            };
            
            const handleScrollAnimation = () => {
                scrollElements.forEach((el) => {
                    if (elementInView(el)) {
                        displayScrollElement(el);
                    }
                });
            };
            
            window.addEventListener('scroll', () => {
                handleScrollAnimation();
            });
            
            // 初始化检查
            handleScrollAnimation();
        });
    </script>
</body>
</html>
```